<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>广州美团网-广州美食_酒店_旅游_团购_电影_吃喝玩乐</title>
	<link rel="stylesheet" type="text/css" href="css/demo.css">
	<link rel="icon"  href="icon/meituan.png">
	<script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
	<div class="wrapper">
		<!-- 顶部导航条 -->
		<div class="top-nav">
			<div class="top-nav-content">
				<div class="l-nav">
					<ul>
						<li class="selected-city"><span></span>广州</li>
						<li class="change-city"><a href="#">切换城市</a></li>
						<li class="l-bra">[</li>
						<li class="city"><a href="#">佛山</a></li>
						<li class="city"><a href="#">顺德</a></li>
						<li class="city"><a href="#">南沙</a></li>
						<li class="r-bra">]</li>
						<li class="login"><a href="#">立即登录</a></li>
						<li class="register"><a href="#">注册</a></li>
					</ul>
				</div>

				<div class="r-nav">
					<ul>
						<li class="account"><a href="#">我的美团</a></li>
						<li class="app"><a href="#">手机APP</a></li>
						<li class="merchant"><a href="#">商家中心</a></li>
						<li class="site-nav"><a href="#">网站导航</a></li>
					</ul>
				</div>			
			</div>
		</div>
		<!-- 搜索框区域 -->
		<div class="search">
			<div class="search-content">
				<div class="logo">
					<a href="#"><img src="./icon/logo.png"></a>
				</div>
				<div class="search-module">
					<div class="search-box">
						<form action="#">
							<input type="text" name="query" placeholder="搜索商家或地点">
							<button><span class="search-btn"></span></button>
						</form>

					</div>
					<div class="hot-word">
						<ul>
							<li><a href="#">广州长隆欢乐世界</a></li>
							<li><a href="#">广州长隆野生动物世界</a></li>
							<li><a href="#">
								正佳极地海洋世界
							</a></li>
							<li><a href="#">白云山风景名胜区</a></li>
							<li><a href="#">广州塔</a></li>
						</ul>
					</div>
				</div>
				<div class="link">
					<a href="#" class="waimai">美团外卖</a>
					<a href="#" class="maoyan">猫眼电影</a>
					<a href="#" class="jiudian">美团酒店</a>
					<a href="#" class="minsu">民宿/公寓</a>
					<a href="#" class="shangjia">商家入驻</a>
					<a href="#" class="gongyi">美团公益</a>
				</div>
			</div>
		</div>
		<!-- 首页主体部分 -->
		<div class="screen">
			<div class="screen-content">
				<div class="left-col">
					<div class="header">
						<span>全部分类</span>
					</div>
					<div class="service-list">
						<ul>
							<li><span class="icon icon1"></span><span class="text"><a href="#">美食</a></span><span class="arrow"></span></li>
							<li><span class="icon icon2"></span><span class="text"><a href="#">外卖</a></span><span class="arrow"></span></li>
							<li><span class="icon icon3"></span><span class="text"><a href="#">酒店<span class="hot">HOT</span></a></span><span class="arrow"></span></li>
							<li><span class="icon icon4"></span><span class="text"><a href="#">榛果民宿</a></span><span class="arrow"></span></li>
							<li><span class="icon icon5"></span><span class="text"><a href="#">猫眼电影</a></span><span class="arrow"></span></li>
							<li><span class="icon icon6"></span><span class="text"><a href="#">机票</a> / <a href="#">火车票</a></span><span class="arrow"></span></li>
							<li><span class="icon icon7"></span><span class="text"><a href="#">休闲娱乐</a> / <a href="#">KTV</a></span><span class="arrow"></span></li>
							<li><span class="icon icon8"></span><span class="text"><a href="#">生活服务</a></span><span class="arrow"></span></li>
							<li><span class="icon icon9"></span><span class="text"><a href="#">丽人</a> / <a href="#">美发</a> / <a href="#">医学美容</a></span><span class="arrow"></span></li>
							<li><span class="icon icon10"></span><span class="text"><a href="#">结婚</a> / <a href="#">婚纱摄影</a> / <a href="#">婚宴</a></span><span class="arrow"></span></li>
							<li><span class="icon icon11"></span><span class="text"><a href="#">亲子</a> / <a href="#">儿童乐园</a> / <a href="#">幼教</a></span><span class="arrow"></span></li>
							<li><span class="icon icon12"></span><span class="text"><a href="#">运动健身</a> / <a href="#">健身中心</a></span><span class="arrow"></span></li>
							<li><span class="icon icon13"></span><span class="text"><a href="#">家装</a> / <a href="#">建材</a> / <a href="#">家具</a></span><span class="arrow"></span></li>
							<li><span class="icon icon14"></span><span class="text"><a href="#">学习培训</a> / <a href="#">音乐培训</a></span><span class="arrow"></span></li>
							<li><span class="icon icon15"></span><span class="text"><a href="#">医疗健康</a> / <a href="#">宠物</a> / <a href="#">爱车</a></span><span class="arrow"></span></li>
							<li><span class="icon icon16"></span><span class="text"><a href="#">酒吧</a> / <a href="#">密室逃脱</a></span><span class="arrow"></span></li>
						</ul>
					</div>
				</div>
				<div class="middle-col">
					<div class="pic pic1">
						<a href="#"></a>
					</div>
					<div class="pic pic2">
						<a href="#"></a>
					</div>
					<div class="pic pic3">
						<a href="#"></a>
					</div>
					<div class="pic pic4">
						<a href="#"></a>
					</div>
					<div class="pic pic5">
						<a href="#"></a>
					</div>
				</div>
				<div class="right-col">
					<div class="login-register">
						<img class="avatar" src="./icon/avatar.jpg"><br>
						<span class="say-hello">Hi! 你好</span><br>
						<a class="register" href="#">注册</a><br>
						<a class="login" href="#">立即登录</a>
					</div>
					<div class="qr-code">
						<img class="download-qr" src="./icon/download-qr.png"><br>
						<span class="text1">美团APP手机版</span><br>
						<span class="text2">1元起</span>
						<span class="text3">吃喝玩乐</span>
					</div>
				</div>
			</div>
		</div>
		<!-- 有格调 -->
		<div class="quality-box"></div>
		<!-- 狠优惠 -->
		<div class="discount-box"></div>
		<!-- 猫眼电影 -->
		<div class="maoyan-box"></div>
		<!-- 推荐民宿· -->
		<div class="homestay-box"></div>
		<!-- 猜你喜欢 -->
		<div class="recommend-box"></div>
		<!-- 美团导航 -->
		<div class="mt-nav"></div>
		<!-- 底部 -->
		<div class="bottom-box"></div>
	</div>

</body>
</html>